<!doctype html>
<html lang="en">
<head>
    <title>Data Surveyor</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- Optional theme -->
    <link href="https://cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet">

    <style>
        body{font-family:'microsoft yahei'}
        .line1{height:1px;margin:15px auto;transform:scaleY(.2);-webkit-transform:scaleY(.2);background-color:#ccc}
        .wrap{padding:0 15px}
        .header .row .col-sm-3.col-xs-5,.header .row .col-sm-3.col-xs-7,.header .row .col-sm-6.col-xs-12{margin-top:15px}
        .listcontent{overflow-x:auto}
        .listcontent .showimg{width:50px;height:50px;    background-color: #eee; border-radius:5px;border:2px solid #fff;background-repeat: no-repeat;background-position: center center; background-size: cover;}
        .add{position:fixed;right:15px;bottom:15px;z-index:2;width:45px;height:45px;border-radius:50%;box-shadow:0 0 15px #ccc;text-align:center;line-height:45px;background:rgba(255,255,255,.5);color:#666}
        .add a{text-decoration:none}

        th{min-width:70px}
        th:first-child{min-width:20px}
        .dn{display:none}
        .cover{position:fixed;left:0;top:0;right:0;bottom:0;z-index:99999}
        .cover .img{background-repeat:no-repeat;background-position:center center;background-size:contain;background-color:rgba(0,0,0,.9);width:100%;height:100%}
        .cover .close{position:absolute;right:15px;top:15px;color:red;font-size:30px;opacity:.8}
    </style>


</head>
<body>
<div class="add">
    <a href="{:url('index/Index/toCommit')}" class="fa fa-plus"></a>
</div>
<div class="wrap">
<!-- 头部筛选 -->
<div class="header">

    <div class="container-fluid">
        <form id="list" action="{:url('index/Index/index')}" method="post">
        <div class="row">

          <div class="col-sm-6 col-xs-12">
            <div class="input-group">

              <span class="input-group-addon">从</span>

              <input type="text"  name="start_time" id="start_time" class="form-control" value="{$data['start_time']}" readonly="true"   aria-label="..." placeHolder="请选择开始时间">

              <span class="input-group-addon">到</span>

              <input type="text" name="end_time" id="end_time" class="form-control" value="{$data['end_time']}" readonly="true"   aria-label="..." placeHolder="请选择截止时间">
          </div><!-- /.col-lg-6 -->
         </div>

          <div class="col-sm-3 col-xs-5">

              <select class="form-control" name="searchtype" id="searchtype" >
                  <option value ="" selected>选择搜索项目</option>
                  <option value ="surveyor" {eq name="data.searchtype" value="surveyor"}selected="selected"{/eq}>姓名</option>
                  <option value ="tool">工具</option>
                  <option value="thing">物件</option>
            </select>
        </div>

          <div class="col-sm-3 col-xs-7">
            <div class="input-group">
              <input type="text" class="form-control" aria-label="..." placeHolder="请输入搜索关键字" name="keyword" value="{$data.keyword}" id="keyword">
              <span class="input-group-addon text-primary" id="gosearch"><i class="fa fa-search"></i></span>
            </div><!-- /input-group -->
          </div><!-- /.col-lg-6 -->

       <div class="col-sm-3 col-xs-7" >
            <div class="input-group">
             <a href="{:url('index/Index/exportExcel')}"><input type="button" class="btn btn-primary" value="导出"></a>
            </div>
          </div>
		  <!-- <div class="col-sm-3 col-xs-7" >
            <div class="input-group">
             <a href="/01simple.xlsx"><input type="button" class="btn btn-primary" value="导出"></a>
            </div>
          </div>-->
		  
		  
		  

        </div>
        </form>

    </div>

</div>

<div class="line1"></div>

<div class="listcontent">


    <table class="table table-striped table-hover table-responsive">
      <thead>

        <tr class="active">
          <th>#</th>
          <th>姓名</th>
          <th>工具</th>
          <th>物件</th>
          <th>数值</th>
          <th>图片</th>
          <th>时间</th>
          <th>操作</th>
        </tr>

      </thead>
      <tbody>

        {volist name="dataList" id="vo" key="s"}
        <tr class="">
          <th scope="row">{$s}</th>
          <td>{$vo.surveyor}</td>
          <td>{$vo.tool}</td>
          <td>{$vo.thing}</td>
          <td>{$vo.testValue}</td>
          <td>
              <div class="{notempty name="vo.imageUrl" value=""}showimg {/notempty}" data-src="/{$vo.imageUrl}" style="background-image:url(/{$vo.imageUrl})"></div>
          </td>
          <td>{$vo.addTime|date='Y-m-d H:i'}</td>
          <td><a href='javascript:if(confirm("确实要删除吗?"))location="{:url('index/Index/del',array('id'=>$vo['id']))}"'>删除</a></td>
        </tr>
        {/volist}
      </tbody>
    </table>
</div>

<div class="footer">
    <!-- <nav aria-label="Page navigation">
      <ul class="pagination ">
        <li class="disabled">
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav> -->
   <?php echo $page;?>

</div>

</div>

<div class="cover dn" style="">
    <div class="close fa fa-close" style=""></div>
    <div class="img" style=""></div>
</div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>

<script src="/laydate/laydate.js"></script>

<script type="text/javascript">

$(document).ready(function(){
    //初始化时间控件

    laydate.render({
        elem: '#end_time',
        min: '2018-01-01',
        type: 'datetime',
        calendar: true ,
        change: function(value, date){
            console.log('123456');
            //ready,done
            //layer.msg('你选择的日期是' + value + '<br><br>获得的对象是' + JSON.stringify(date));
        }
    });

    laydate.render({
        elem: '#start_time',
        min: '2018-01-01',
        type: 'datetime',
        calendar: true ,
        change: function(value, date){
            console.log('123456');
            //ready,done
            //layer.msg('你选择的日期是' + value + '<br><br>获得的对象是' + JSON.stringify(date));
        }
    });


    // 搜索
    $('#gosearch').on('click',function(){
        //refreshlist();
        $('#list').submit();
    });


    var refreshlist =  function(){

        var start_time =  $('#start_time').val()? new Date($('#start_time').val().replace(/-/g,'/')).getTime()/1000:'';
        var end_time =  $('#end_time').val()? new Date($('#end_time').val().replace(/-/g,'/')).getTime()/1000:'';
        var searchtype = $('#searchtype').val();
        var keyword = $.trim($('#keyword').val());

        if(start_time.length+end_time.length+searchtype.length+keyword.length==0) {layer.msg('请输入搜索条件');return;};

        var url = '?start_time='+start_time+'&end_time='+end_time+'&searchtype='+searchtype+'&keyword='+keyword;

        layer.msg(url);
        return;

        window.location.href=url;


    }
    
    $('.cover .close').on('click',function(){
        $('.cover').addClass('dn');
        $('body').css('overflow','auto');
    })
    //查看图片大图 
    $('.showimg').on('click',function(){

        var that = $(this);
        var url = that.data('src');
        $('.cover').removeClass('dn');
        $('.cover .img').css('background-image','url('+url+')');
        $('body').css('overflow','hidden');

    })

})


</script>
</html>